<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% block title %}高校图书馆推荐系统{% endblock title %}</title>
    {% load static %}

    <link rel="stylesheet" type="text/css" href="{% static 'web/css/bootstrap.min.css'%}">
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='{% static "web/css/base.css" %}' />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

    <style type="text/css">
        .thumbnail p,
        .thumbnail h4 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .star-rating {
            line-height: 32px;
            font-size: 1.25em;
        }

        .star-rating .fa-star {
            color: yellow;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">

            <!-- Header -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="">高校图书馆推荐系统</a>
            </div>

            <!-- Items -->
            <div class="collapse navbar-collapse" id="topNavBar">
                <ul class="nav navbar-nav ">

                    <li><a href="{% url 'index' %}">&nbsp; 主页</a></li>

                </ul>

                <ul class="nav navbar-nav navbar-right">
                    {% if not request.user.is_authenticated %}
                    <li>
                        <a href="{% url 'signup' %}">
                            <span aria-hidden="true"></span>&nbsp;
                            注册
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'login' %}">
                            <span aria-hidden="true"></span>&nbsp; 登录
                        </a>
                    </li>
                    {% else %}
                    <li>
                        <a href="{% url 'recommend' %}">
                            <span aria-hidden="true"></span>&nbsp; {{ request.user.username }}
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'logout' %}">
                            <span aria-hidden="true"></span>&nbsp; 退出
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>

        </div>

    </nav>
    </div>
    {% block body %}
    {% endblock %}
    <nav class="navbar navbar-bottom" style="background-color: rgb(211, 211, 211);">
        <footer class="page-footer font-small">
            <hr>
            <div class="text-center center-block">
                <br />
                <a href="https://github.com/ligongzzz"><i id="social-git" class="fa fa-github-square fa-3x"></i></a>
            </div>
            <hr>
            <div class="footer-copyright text-center py-3" style="margin-bottom: 20pt;">© 2021 Copyright:
                <a href="https://www.sjtu.edu.cn">上海交通大学</a>
            </div>
            <div class="footer-copyright text-center py-3" style="margin-bottom: 20pt;">
                <a href="https://beian.miit.gov.cn">赣ICP备19013639号-1</a>
            </div>

        </footer>
    </nav>
    <script type="text/javascript" src="{%static 'web/js/jquery.min.js'%}">
    </script>

    <script type="text/javascript" src="{%static 'web/js/bootstrap.min.js'%}">
    </script>
    <script type="text/javascript">
        var $star_rating = $('.star-rating .fa');

        var SetRatingStar = function () {
            return $star_rating.each(function () {
                if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
                    return $(this).removeClass('fa-star-o').addClass('fa-star');
                } else {
                    return $(this).removeClass('fa-star').addClass('fa-star-o');
                }
            });
        };

        $star_rating.on('click', function () {
            $star_rating.siblings('input.rating-value').val($(this).data('rating'));
            return SetRatingStar();
        });

        SetRatingStar();
        $(document).ready(function () {

        });

    </script>
    <script type="text/javascript">
        function validateForm() {
            var x = document.forms["ratingForm"]["rating"].value;
            if (x == "0") {
                alert("请选择一个评分");
                return false;
            }
        }
    </script>
</body>

</html>